<template>
  <div class="search-input-box">
    <div class="search-box">
      <a-dropdown v-model:visible="state.showHistory" :trigger="['click']" :getPopupContainer="triggerNode => triggerNode.parentNode || document.body" overlayClassName="history-menu">
        <a-input ref="searchInputRef" v-model:value="$store.state.queryForm.url" :disabled="state.searching" allowClear placeholder="请输入带http://或https://的链接、网址，即可图谱展现" @pressEnter="queryLink" @input="searchInputChange" />
        <template #overlay>
          <a-menu @click="selectUrl" v-if="$store.state.historyRecord.length > 0 && !state.searching">
            <div class="menu-title">
              <h3>历史记录</h3>
              <a @click.prevent="removeHistory('all')">清空</a>
            </div>
            <a-menu-item v-for="item in $store.state.historyRecord" :key="item">
              <span class="history-url-item">{{ item }}</span>
              <img src="@/assets/img/index-img/close-round-icon.png" alt="close-round-icon" @click.stop="removeHistory(item)">
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
      <a-divider type="vertical" class="search-line"/>
      <div :class="{'popover-box': true,'disabled-click':state.searching}">
        <a-popover v-model:visible="state.showRegion" placement="bottomRight" trigger="click" :getPopupContainer="triggerNode => triggerNode.parentNode || document.body" overlayClassName="region-popover">
          <!--          <template #title>-->
          <!--            <span class="now-location" @click="selectRegion('安徽')">安徽</span>-->
          <!--            <img src="@/assets/img/index-img/location-icon.png" alt="location-icon">-->
          <!--          </template>-->
          <template #content>
            <div class="province-list">
              <div class="province-item" @click="selectRegion(item)" :style="{ 'color': state.regionValue === item ? '#483CFF' : '' }" v-for="item in $store.state.provinceList" :key="item">{{ item }}</div>
            </div>
          </template>
          <div class="select-region">{{ state.regionValue || '请选择地域' }}</div>
          <div class="search-icon-box">
            <img src="@/assets/img/account-img/search-icon.svg" alt="search-icon" width="32" height="32" v-show="!state.searching" @click.stop="queryLink">
            <loading-outlined v-show="state.searching" />
          </div>
        </a-popover>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive, getCurrentInstance, watch} from 'vue'
import { LoadingOutlined } from '@ant-design/icons-vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
const router = useRouter()
const route = useRoute()
const store = useStore()
const { proxy } = getCurrentInstance()

const state = reactive({
  searching: false,
  showHistory: false,
  showRegion: false,
  regionValue: '',
})

let timer = null
const searchInputChange = ()=>{
  if(store.state.queryForm.url && store.state.historyRecord.length > 0){
    clearTimeout(timer)
    timer = setTimeout(()=>{
      store.commit('changeState',['historyRecord',store.state.historyRecord.filter(item=>item.indexOf(store.state.queryForm.url) !== -1)])
      state.showHistory = true
    },300)
  } else {
    store.commit('changeState',['historyRecord',localStorage.historyRecord ? JSON.parse(localStorage.historyRecord) : []])
  }
}

const queryLink = ()=> {
  // if(!store.state.userInfo.mobile && this.state.isLogin) return store.commit('checkIsBindMobile')
  if(!store.state.isLogin) return proxy.$message.error('您未登录或已超时，请先登录后，再进行操作。')
  if(!store.state.queryForm.url) return proxy.$message.error('链接不能为空。')
  if(!store.state.urlReg.test(store.state.queryForm.url)) return proxy.$message.error('链接格式有误。')
  state.searching = true
  document.querySelector('.select-region').style.pointerEvents = 'none'
  store.dispatch('queryLink')
}

const selectUrl = url=>{
  store.state.queryForm.url = url.key
  state.showHistory = false
}

const removeHistory = type => {
  if (type === 'all' || store.state.historyRecord.length === 1){
    state.showHistory = false
  }
  store.dispatch('removeHistory',type)
}

const selectRegion = region =>{
  state.showRegion = false
  state.regionValue = region
}

let searchBox,inputWrapper,searchInput,popoverBox,searchLine,searchIcon
onMounted(()=>{
  searchBox = document.querySelector('.search-box')
  searchIcon = document.querySelector('.search-icon-box')
  popoverBox = document.querySelector('.popover-box')
  searchLine = document.querySelector('.search-box .search-line')
  inputWrapper = document.querySelector('.search-box .ant-input-affix-wrapper')
  searchInput = document.querySelector('.search-box .ant-input-affix-wrapper .ant-input')
  searchIcon.onmouseover = event=>{
    event.stopPropagation()
    searchLine.style.visibility = 'unset'
    !state.showRegion && !state.showHistory ? popoverBox.style.backgroundColor = '#ffffff' : ''
  }
  popoverBox.onmouseover = ()=> {
    searchLine.style.visibility = 'hidden'
    !state.showRegion && !state.showHistory ? popoverBox.style.backgroundColor = '#EBEBEB' : ''
  }
  popoverBox.onmouseleave = ()=> {
    if(!state.showRegion && !state.showHistory){
      popoverBox.style.backgroundColor = '#ffffff'
      searchLine.style.visibility = 'unset'
    }
  }
})
watch(()=>state.showRegion,(newVal,oldVal)=>{
  searchLine.style.visibility = state.showRegion || state.showHistory ? 'hidden' : 'unset'
  if(newVal){
    searchBox.style.backgroundColor = inputWrapper.style.backgroundColor = searchInput.style.backgroundColor = '#f7f7f7'
    popoverBox.style.backgroundColor = '#ffffff'
    popoverBox.style.boxShadow = '-3px 0 10px rgba(51,51,51,0.1)'
  }else{
    searchBox.style.backgroundColor = inputWrapper.style.backgroundColor = searchInput.style.backgroundColor =  '#ffffff'
    popoverBox.style.boxShadow = 'unset'
  }
})
</script>

<style lang="less" scoped>
.search-input-box{
  padding: 0 20px;
  &:deep(.search-box){
    max-width: 1040px;
    height: 60px;
    margin: 30px auto 0;
    border-radius: 32px;
    border: 1px solid #DFDFDF;
    background-color: #ffffff;
    box-shadow: 0 0 8px rgba(0,0,0,0.05);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    transition: unset;
    .history-menu {
      .ant-dropdown-content {
        width: 560px;
        .ant-dropdown-menu {
          padding: 16px 0;
          border-radius: 8px;
          margin-top: 5px;
          box-shadow: 0 0 15px 2px rgba(0,0,0,0.05);
          .menu-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            line-height: unset;
            margin-bottom: 10px;
            padding: 0 16px;
            h3 {
              margin-bottom: 0;
              font-size: 18px;
              font-weight: 600;
              color: @sub-title;
            }
            a {
              color: @content;
            }
          }
          .ant-dropdown-menu-item {
            padding: 0 16px;
            height: 40px;
            border-radius: 8px;
            .ant-dropdown-menu-title-content {
              display: flex;
              justify-content: space-between;
              .history-url-item{
                width:100%;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
              }
              .history-url-item{
                max-width: 500px;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
              }
            }
          }
        }
      }
    }
    .ant-input-affix-wrapper {
      width: 785px;
      height: 58px;
      border-radius: inherit;
      padding-left: 32px;
      font-size: 16px;
      display: flex;
      align-items: center;
      border: none;
      background-color: #ffffff;
      transition: unset;
      .ant-input{
        border: none;
        padding: 0;
        font-size: 16px;
        transition: unset;
      }
      .ant-input-suffix{
        .anticon-close-circle{
          font-size: 18px;
        }
      }
    }
    .ant-input-affix-wrapper-focused{
      box-shadow: unset!important;
    }
    .ant-input-affix-wrapper-disabled{
      background-color: unset!important;
    }
    &:focus-within {
      background-color: #f7f7f7!important;
      //border-color: @primary;
      .ant-input-affix-wrapper{
        box-shadow: 5px 0 10px rgba(51,51,51,0.05)!important;
      }
      .ant-divider-vertical{
        visibility: hidden!important;
      }
      .popover-box{
        span:first-child {
          background-color: #f7f7f7;
        }
      }
    }
    .search-line {
      height: 22px;
      transition: unset!important;
    }
    .popover-box {
      width: 236px;
      transition: all .15s;
      border-radius: 32px;
      overflow: hidden;
      span:first-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
      }
      .select-region{
        width: calc(100% - 54px);
        height: 58px;
        border: none;
        font-size: 18px;
        color: @content;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: unset;
        background-color: transparent;
        cursor: pointer;
        letter-spacing: 1px;
      }
      .search-icon-box {
        width: 46px;
        height: 46px;
        cursor: pointer;
        background-color: @primary;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        margin-right: 8px;
        transition: background-color .2s;
        position: relative;
        right: 0;
        &:hover{
          background-color: @primary-hover;
        }
        .anticon-loading{
          font-size: 20px;
          color: #ffffff;
        }
      }
      .region-popover{
        width: 400px;
        padding-top: 5px;
        .ant-popover-content{
          .ant-popover-inner{
            border-radius: 8px;
            box-shadow: 0 0 15px 2px rgba(0,0,0,0.05);
            .ant-popover-title{
              border-bottom: none;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .now-location{
                color: @sub-title;
                font-size: 18px;
                cursor: pointer;
              }
            }
            .ant-popover-inner-content{
              padding: 6px 10px;
              .province-list{
                display: grid;
                grid-template-columns: repeat(auto-fill, 48px);
                grid-column-gap: 32px;
                justify-content: space-evenly;
                .province-item{
                  width: 48px;
                  height: 40px;
                  cursor: pointer;
                  color: @content;
                  text-align: center;
                  line-height: 40px;
                  &:hover{
                    color: @primary;
                  }
                }
              }
            }
          }
        }
      }
    }
    .anticon-search {
      width: 48px;
      height: 48px;
      svg {
        width: 20px;
        height: 20px;
      }
    }
  }
}
</style>
